<template>
  <div
    class="tui-conversation"
    @click="handleClickConv"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
	<!--  默认消息头 -->
	<HeadAddAndQun title="消息列表" />
	<!--
	发起群聊 / 单聊的 另外一种显示的按钮 
	<ConversationHeader
      v-if="isShowConversationHeader"
      ref="headerRef"
    /> 
	-->
	<!-- <ConversationHeader ref="headerRef" /> -->
	<!-- 网络状态显示 -->
    <ConversationNetwork />
	
	<!-- 消息列表 -->
	<!--
		ref="conversationListDomRef" 这里类似引入 的一个子组件的抓手
		可以 通过 类似
		this.$ref.conversationListDomRef.子组件里面的data的key获取子组件的值
		原始写法如下
		没有 这个 ref="conversationListDomRef"
		点击 空白的时候 没法关闭那个 弹出层 牛逼
	-->
	<ConversationList
	  ref="conversationListDomRef"
	  class="tui-conversation-list"
	  @handleSwitchConversation="handleSwitchConversation"
	  @getPassingRef="getPassingRef"
	/>
  </div>
</template>
<script lang="ts" setup>
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
import { TUIGlobal } from '@tencentcloud/universal-api';
import { ref } from '/TUIKit/adapter-vue';
import ConversationList from './conversation-list/index.vue';
import ConversationHeader from './conversation-header/index.vue';
import ConversationNetwork from './conversation-network/index.vue';
import { onHide } from '@dcloudio/uni-app';
// 加载自定义搜索组件
import HeadAddAndQun from '/pages/common/HeadAddAndQun/index.vue';

// #ifdef MP-WEIXIN
// uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
// TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
import './entry.ts';
// #endif

// @Start uniapp use Chat only
import { onLoad, onUnload } from '@dcloudio/uni-app';

const emits = defineEmits(['handleSwitchConversation']);
const totalUnreadCount = ref(0);
const headerRef = ref<typeof ConversationHeader>();
const conversationListDomRef = ref<typeof ConversationList>();
const touchX = ref<number>(0);
const touchY = ref<number>(0);
const isShowConversationHeader = ref<boolean>(true);


// 声音 开关
let switchAudio = 'close';
const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	innerAudioContext.src = '/static/sounds/msg.mp3';
	innerAudioContext.onPlay(() => {
	  // console.log('开始播放');
	});
	innerAudioContext.onError((res) => {
	  // console.log(res.errMsg);
	  // console.log(res.errCode);
	});

// 加载时刻 自动初始化 聊天
onLoad((options) => {
});

// 监听 对话更新 有更新就播放声音
TUIStore.watch(StoreName.CONV, {
  totalUnreadCount: (count: number) => {
    totalUnreadCount.value = count;
	// 每次播放之前 检测一下是否有播放
	if(uni.getStorageSync('switchAudio')){
	  switchAudio = uni.getStorageSync('switchAudio')
	}
	console.log('开关：'+switchAudio)
	// 有新的消息 自动播放提示音
	if (innerAudioContext && switchAudio == 'open' && count > 0) {
	  try {
		  innerAudioContext.play()
	    // innerAudioContext.pause();
	    // innerAudioContext.destroy()
	    // innerAudioContext = null
	  } catch (e) {
	    //TODO handle the exception
	  }
	}
  },
});

TUIStore.watch(StoreName.CUSTOM, {
  isShowConversationHeader: (showStatus: boolean) => {
    isShowConversationHeader.value = showStatus !== false;
  },
});

const handleSwitchConversation = (conversationID: string) => {
  TUIGlobal?.navigateTo({
    url: '/pages/chat/index',
  });
  emits('handleSwitchConversation', conversationID);
};

const closeChildren = () => {
  headerRef?.value?.closeChildren();
  conversationListDomRef?.value?.closeChildren();
};

const handleClickConv = () => {
  // 默认逻辑 
  closeChildren();
};

onHide(closeChildren);

const handleTouchStart = (e: any) => {
  touchX.value = e.changedTouches[0].clientX;
  touchY.value = e.changedTouches[0].clientY;
};

const handleTouchEnd = (e: any) => {
  const x = e.changedTouches[0].clientX;
  const y = e.changedTouches[0].clientY;
  let turn = '';
  if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
    // Swipe right
    turn = 'right';
  } else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
    // Swipe left
    turn = 'left';
  }
  if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
    // Swipe down
    turn = 'down';
  } else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
    // Swipe up
    turn = 'up';
  }
  // Operate according to the direction
  if (turn === 'down' || turn === 'up') {
    closeChildren();
  }
};

const getPassingRef = (ref) => {
  ref.value = conversationListDomRef.value;
};
</script>

<style lang="scss" scoped src="./style/index.scss"></style>
<style>

</style>
